<template>
	<div class="goods-list">
		<router-link class="goods-item" v-for="item in shoplist" :key="item.id" :to="'/home/shoplist/goodsmessage/'+item.id">
			<img src="https://img.alicdn.com/imgextra/i2/4245710852/O1CN01GKdL241IAFysDOJ4M_!!4245710852.jpg_430x430q90.jpg" alt="">
			<h1>Redmi K20</h1>
			<div class="info">
				<p class="price">
				<span class="now">￥1999</span>
				<span class="old">￥2099</span></p>
				<p class="cell">
					<span>热卖中</span>
					<span>剩66件</span>
				</p>
			</div>

			
		</router-link>

		
	</div>
</template>
<script type="text/javascript">
	export default{
		data(){
			return{
				shoplist:[]
				
			}
		},
		created(){
			this.getShopList()

		},
		methods:{
			getShopList(){
				this.$http.get("http://jsonplaceholder.typicode.com/photos").then(
					result=>{
						if(result.ok==true){
							this.shoplist=result.body.slice(0,20)
							
							
						}else{
							Toast("请求失败")

						}
					}
					)
			}

		}

	}

</script>
<style lang="scss" scoped>
	.goods-list{
		display: flex;
		flex-wrap: wrap;
		padding: 0px 3px;
		padding-bottom: 52px;
		justify-content:space-between;

		.goods-item{
			padding:2px 0px;
			box-shadow: 0 0 8px #ccc;
			border:1px solid #ccc;
			width: 49%;
			
			img{
				width:100%;
				
			}
			h1{
				font-size: 20px;
			}
			.info{
				background-color: #eee;
				.price{
					.now{
						color: red;
						font-size: 20px;
					}
					.old{

					text-decoration: line-through;

					}
				}

				.cell{
					margin:1px 0;
					display: flex;
					justify-content: space-between;
				}
			}
		}
	}
</style>